<template>
    <div>
        <div class="search-title">
            <el-form :model="ruleForm" class="form-inline" size="small">
                <el-form-item label="报案号" prop="caseNumber">
                    <el-input v-model="ruleForm.caseNumber" placeholder="请输入报案号" clearable></el-input>
                </el-form-item>
                <el-form-item label="开始日期">
                    <el-date-picker v-model="ruleForm.startDate" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束日期">
                    <el-date-picker v-model="ruleForm.endDate" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
        </div>
        <div class="sear-btn">
            <el-button type="primary" round plain size="small" @click="resetForm()">重置</el-button>
            <el-button type="primary" round size="small" @click="findCiapTaskStatusList()">搜索</el-button>
        </div>
        <el-table :data="tableData" :height="tableHeight" style="width: 100%;" v-loading="tableLoading">
            <el-table-column prop="caseNumber" label="报案号" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="includeImageTime" label="时间" header-align="center" align="center">
            </el-table-column>
            <el-table-column label="上传状态" header-align="center" align="center">
                <template slot-scope="scope">
                    <span :class="`upstatus_${includeStatus}`">{{ scope.row.includeTxt }}</span>
                </template>
            </el-table-column>
            <el-table-column label="上传成功（张）" header-align="center" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.includeStatusSuccess }}/{{
                        scope.row.includeSum }}</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" header-align="center" align="center">
                <template slot-scope="scope">
                    <el-button @click="imgAgainInclude(scope.row.taskId)" type="text" size="small">重新上传</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="ruleForm.currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="ruleForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import { findCiapTaskStatusList, imgAgainInclude } from '@/api/case'
export default {
    data() {
        return {
            tableLoading: false,
            tableData: [],
            total: 0,
            tableHeight: window.innerHeight - 320,
            ruleForm: {
                pageSize: 10,
                currentPage: 1,
                caseNumber: '',
                startDate: this.$dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
                endDate: this.$dayjs().format('YYYY-MM-DD')
            },
        }
    },
    created() {
        this.findCiapTaskStatusList()
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo
        })
    },
    methods: {
        findCiapTaskStatusList() {
            this.tableLoading = true
            this.ruleForm.groupName = this.userInfo.group
            this.ruleForm.sertId = this.userInfo.userId
            this.ruleForm.pageCount = this.ruleForm.pageSize.toString()
            this.ruleForm.pageNum = this.ruleForm.currentPage.toString()
            findCiapTaskStatusList(this.ruleForm).then(res => {
                this.tableLoading = false
                this.tableData = res.taskList.map(item => {
                    switch (item.includeStatus) {
                        case "-1":
                            item.includeTxt = "正在上传";
                            break;
                        case "0":
                            item.includeTxt = "上传失败";
                            break;
                        case "1":
                            item.includeTxt = "上传成功";
                            break;
                    }
                    return item
                })
                this.total = res.totalCount
            })
        },
        imgAgainInclude(taskId) {
            const params = {
                taskId: taskId,
                userId: this.userInfo.userId,
                workNumber: sessionStorage.getItem('workNumber')
            }
            imgAgainInclude(params).then(() => {
                this.$message({
                    message: '操作成功，正在重新上传',
                    type: 'success'
                })
                this.findCiapTaskStatusList()
            })
        },
        resetForm() {
            this.ruleForm = {
                pageSize: 10,
                currentPage: 1,
                caseNumber: '',
                startDate: this.$dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
                endDate: this.$dayjs().format('YYYY-MM-DD')
            }
        },
        handleSizeChange(val) {
            this.ruleForm.pageSize = val
            this.findCiapTaskStatusList()
        },
        handleCurrentChange(val) {
            this.ruleForm.currentPage = val
            this.findCiapTaskStatusList()
        }
    }
}
</script>
<style lang='scss' scoped>
.form-inline {
    display: flex;
    flex-wrap: wrap;
}

.form-inline .el-form-item {
    width: calc(100% / 3);
    margin: 0 auto;
    padding: 10px 20px;
}

::v-deep .form-inline .el-form-item .el-form-item__label {
    margin-left: 5%;
}

.form-inline .el-form-item .el-input,
.form-inline .el-form-item .el-select {
    width: 65%;
}

.sear-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.sear-btn .el-button {
    padding: 8px 35px;
    margin: 10px 40px 0 0;
}

.upstatus_-1 {
    color: #5ea8f8;
}

.upstatus_0 {
    color: #ec5a3f;
}

.upstatus_1 {
    color: #62c655;
}

.el-pagination {
    display: flex;
    justify-content: flex-end;
    padding: 10px 20px;
}

::v-deep .el-table tbody td .cell:empty::after {
    content: '— —' !important;
}
</style>
